<template>
  <div class="Cumulative_error">
    <div class="main">
      <el-form ref="searchForm" :inline="true" class="demo-form-inline">
        <!-- <el-form-item label="系统名称">
          <el-autocomplete
            clearable
            class="inline-input"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请输入系统名称"
            :trigger-on-focus="false"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item> -->
        <!-- <el-form-item label="系统名称" prop="state" class="leftMargiin">
          <el-input clearable v-model="state" class="inline-input" placeholder="请输入系统名称" />
        </el-form-item> -->
        <el-form-item label="批次" prop="changeCode" class="leftMargiin">
          <el-input
            clearable
            v-model="changeCode"
            class="inline-input"
            placeholder="请输入批次号"
          />
        </el-form-item>
        <el-form-item label="排序字段" prop="value" class="leftMargiin">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options_SortField"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序顺序" prop="value1" class="leftMargiin">
          <el-select v-model="value1" placeholder="请选择" @change="handleClick">
            <el-option
              v-for="item in options_Sort"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="button">
        <!-- <button @click="detail" class="btn">查看详情</button> -->
        <button @click="search" @keyup.enter="monitor()" class="btn reset">搜索</button>
        <button @click="resetForm" class="btn">重置</button>
      </div>
    </div>
    <el-container>
      <el-aside width="200px">
        <el-col :span="20">
          <h5 class="mb-2">系统名称</h5>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="handleSelect"
          >
            <el-menu-item
              :index="index + ''"
              v-for="(item, index) in systemName_count"
              :key="index + 1"
            >
              <span>{{ item.projectName }}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <div class="tableBox">
          <div class="desc" v-if="descNo">
            <img src="@/assets/images/txtb-glcs.png" alt="" />
            {{ desc }}
          </div>
          <div class="table" ref="container">
            <el-table
              :height="tableHeight"
              class="table"
              ref="multipleTable"
              :data="changeList"
              tooltip-effect="dark"
              v-loading="loading"
            >
              <!--     @select="selectChange"
                    @selection-change="handleSelectionChange"
                    row-key="getRowKey"
                    @row-click="handleRowClick" -->
              <!--  <el-table-column align="center" :reserve-selection="false" type="selection">
          </el-table-column> -->
              <template #empty>
                <p>{{ tableText }}</p>
              </template>
              <el-table-column
                align="center"
                prop="projectName"
                label="系统名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="flowInsName"
                label="批次"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="flowName"
                label="工作流名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="actName"
                label="活动名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="errorType"
                label="超时类型"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="happenTime"
                label="发生时间"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="recoverTime"
                label="恢复时间"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <el-pagination
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { onMounted, ref, onUnmounted, reactive } from 'vue';
  import {
    getToken,
    statisticsIndicateDetail,
    queryDayAndEXecutionPrj
  } from '@/http/api/dispatch/batch_scheduling_api.ts';
  // import { useStore } from 'vuex';
  // const store = useStore();
  const pageNum = ref(1);
  const pageSize = ref(10);
  const changeList = reactive([]);
  const total = ref(0);
  // 变更原因
  const changeTitle = ref('');
  // 变更单号
  const changeCode = ref('');
  const state = ref('');
  // const orgId = ref('');
  const tableHeight = ref(0);
  //   导出列表
  const desc = ref('');
  const descNo = ref(false);
  const tokenNum = ref('');
  const timeRange = ref('');
  const twelveTime = ref(12 * 60 * 60);
  const current_time = ref(
    new Date().getFullYear() +
      '-' +
      (new Date().getMonth() >= 9 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)) +
      '-' +
      (new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate())
  );
  const options_SortField = ref([
    {
      value: '系统名称',
      label: '系统名称'
    },
    {
      value: '工作流名称',
      label: '工作流名称'
    },
    {
      value: '批次',
      label: '批次'
    },
    {
      value: '活动名称',
      label: '活动名称'
    },

    {
      value: '超时类型',
      label: '超时类型'
    },
    {
      value: '发生时间',
      label: '发生时间'
    },
    {
      value: '恢复时间',
      label: '恢复时间'
    }
  ]);
  const value = ref('发生时间');
  const Sort_field = ref('发生时间&asc');
  const value1 = ref('正序');
  const sort = ref('desc');
  const options_Sort = ref([
    {
      value: 'desc',
      label: '倒序'
    },
    {
      value: 'asc',
      label: '正序'
    }
  ]);
  const page = ref('1-10');
  const loading = ref(true);
  const tableText = ref('');
  const container = ref<null | HTMLElement>(null);
  const systemName_count = reactive([]);
  const activeIndex = ref('0');
  const handleSelect = (item: string) => {
    state.value = systemName_count[item].projectName;
    cut_system();
  };
  onMounted(() => {
    JudgeTime();
    getTokenCount();
    calHeight();
    enterKeyup();
  });
  const JudgeTime = () => {
    let date = new Date();
    let obj = date.getHours() * 60 * 60 + date.getMinutes() * 60 + date.getSeconds();

    if (obj > twelveTime.value) {
      let time = ref(date.getTime() + 24 * 60 * 60 * 1000); // 后一天
      let yesday = ref(new Date(time.value));
      yesday.value =
        yesday.value.getFullYear() +
        '-' +
        (yesday.value.getMonth() >= 9
          ? yesday.value.getMonth() + 1
          : '0' + (yesday.value.getMonth() + 1)) +
        '-' +
        (yesday.value.getDate() > 9 ? yesday.value.getDate() : '0' + yesday.value.getDate());
      timeRange.value = current_time.value + ' 12:00' + '~' + yesday.value + ' 12:00';
      return timeRange;
    } else {
      let time = date.getTime() - 24 * 60 * 60 * 1000;
      let yesday = new Date(time); //前一天
      yesday =
        yesday.getFullYear() +
        '-' +
        (yesday.getMonth() >= 9 ? yesday.getMonth() + 1 : '0' + (yesday.getMonth() + 1)) +
        '-' +
        (yesday.getDate() > 9 ? yesday.getDate() : '0' + yesday.getDate());
      timeRange.value = yesday + ' 12:00' + '~' + current_time.value + ' 12:00';
      return timeRange;
    }
  };
  const getTokenCount = () => {
    getToken().then((res) => {
      if (!(res as any).data.data.isOk) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        // getTokenCount();
        return;
      }
      tokenNum.value = res.data.data.token;
      systemList();
      // statisticsIndicateDetail_list();
    });
  };
  const cut_system = () => {
    getToken().then((res) => {
      if (!(res as any).data.data.isOk) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        // getTokenCount();
        return;
      }
      tokenNum.value = res.data.data.token;
      statisticsIndicateDetail_list();
    });
  };
  const systemList = () => {
    queryDayAndEXecutionPrj({
      token: tokenNum.value,
      type: '超时累计',
      timeRange: timeRange.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        loading.value = true;
        tableText.value = '';
        getTokenCount();
        return;
      }
      systemName_count.length = 0;
      (systemName_count as any).push(...res.data.data.list);
      if (res.data.data.total == 0) {
        tableText.value = '暂无数据';
        loading.value = false;
        return;
      }
      state.value = systemName_count[0].projectName;
      statisticsIndicateDetail_list();
    });
  };
  const statisticsIndicateDetail_list = () => {
    let params = {
      type: '超时累计',
      projectName: state.value,
      flowInsName: changeCode.value,
      timeRange: timeRange.value,
      sort: Sort_field.value,
      page: page.value,
      token: tokenNum.value
    };
    statisticsIndicateDetail(params).then((res) => {
      if ((res as any).data.code == 500) {
        loading.value = true;
        tableText.value = '';
        // getTokenCount();
        return;
      }
      changeList.length = 0;
      (changeList as any).push(...res.data.data.list);
      total.value = res.data.data.total;
      loading.value = false;
      if (!total.value) {
        tableText.value = '暂无数据';
      }
    });
  };
  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };

  const resetForm = () => {
    changeTitle.value = '';
    changeCode.value = '';
    // state.value = '';
    value.value = '发生时间';
    value1.value = '正序';
    sort.value = 'asc';
    page.value = '1-10';
  };
  const search = () => {
    state.value = state.value.replace(/(^\s*)|(\s*$)/g, '');
    changeTitle.value = changeTitle.value.replace(/(^\s*)|(\s*$)/g, '');
    changeCode.value = changeCode.value.replace(/(^\s*)|(\s*$)/g, '');
    Sort_field.value = value.value + '&' + sort.value;

    page.value = '1-10';
    cut_system();
  };
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    page.value = pageNum.value + '-' + pageSize.value;
    cut_system();
  };
  const handleCurrentChange = (val) => {
    pageNum.value = val;
    page.value = pageNum.value + '-' + pageSize.value;
    cut_system();
  };
  const handleClick = (item: string) => {
    sort.value = item;
  };

  onUnmounted(() => {
    enterKeyupDestroyed();
  });
</script>

<style lang="less" scoped>
  .Cumulative_error {
    height: 100%;
    .main {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .demo-form-inline {
        display: flex;
        height: 34px;
        max-width: 80%;
        width: 80%;
        //align-items: center;
        :deep(input::placeholder) {
          font-size: 14px;
          font-weight: 400;
          color: #bbbbbb;
        }
        :deep(.el-form-item) {
          margin-bottom: 0;
          line-height: 34px;
          height: 34px;
          width: 40%;
        }
        :deep(.el-form-item__content) {
          line-height: 34px;
          //height: 43px;
          width: 80%;
          :deep(.inline-input) {
            // width: 230px;
            height: 34px;
          }
        }
        :deep(.el-input__inner) {
          // width: 200px;
          height: 34px;
          background: #ffffff;
          // border: 1px solid #dddddd;
          border-radius: 2px;
        }
        :deep(.el-form-item__label) {
          // color: #6fd7f7;
          font-size: 14px;
          font-weight: 400;
          color: #46545d;
          height: 34px;
          line-height: 34px;
        }
      }
      .button {
        display: flex;
        justify-content: space-around;
        max-width: 40%;
        .btn {
          width: 80px;
          height: 34px;
          line-height: 34px;
          background: #007af5;
          border-radius: 2px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          border: 0;
          &.reset {
            margin: 0 10px;
          }
        }
        #goBack {
          max-width: 131px;
          height: 34px;
          background: #007af5;
          border-radius: 2px;
          border: 0;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
        }
        .el-dropdown {
          margin: 0px 10px;
        }
        .el-dropdown-link {
          // display: inline-block;
          width: 80px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          color: #fff;
          background: #007af5;
          border-radius: 2px;
        }
      }
    }
    .el-container {
      height: calc(100% - 50px);
      .el-aside {
        padding-top: 10px;
        box-sizing: border-box;
        .el-col {
          height: 100%;
          max-width: 100%;
          .mb-2 {
            text-align: center;
          }
          .el-menu-vertical-demo {
            .el-menu-item {
              text-align: center;
              span {
                display: inline-block;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
      .el-main {
        padding: 0;
        .tableBox {
          height: calc(100% - 50px);
          background: #fff;
          padding: 20px 20px 0;
          box-sizing: border-box;
          //overflow: hidden;
          .desc {
            font-size: 12px;
            font-weight: 400;
            color: #f8b551;
            line-height: 33px;
            height: 33px;
            text-align: center;
            background: #fef0dc;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            div {
              line-height: 16px;
              // width: 16px;
              margin-right: 10px;
              img {
                width: 16px;
                height: 16px;
                // margin: auto;
                // margin-right: 10px;
              }
            }
          }
          .table {
            // background: rgba(0, 0, 0, 0.1);
            height: calc(100% - 50px);
            width: 100%;
            margin-bottom: 15px;
            :deep(.el-table-column--selection.is-leaf .el-checkbox) {
              display: none;
            }
            :deep(.el-table__cell.is-leaf) {
              //background: rgba(0, 0, 0, 0.1);
              // color: #6fd7f7;
              //color: #fff;
              color: #929ea8;
            }

            :deep(tr:hover > td) {
              background-color: transparent;
            }
            :deep(.el-table__empty-text) {
              //color: #fff;
              color: #929ea8;
            }
            :deep(td.el-table__cell) {
              //color: #fff;
              color: #929ea8;
            }
          }
          .el-pagination {
            height: 34px;
            padding: 0;
            box-sizing: border-box;
            width: 50%;
            :deep(.el-pagination__total) {
              font-size: 14px;
              font-weight: 400;
              color: #bbbbbb;
              line-height: 34px;
            }

            :deep(.el-input__inner) {
              height: 34px;
              //width: 60px;
              background: #fff;
              //color: #66b1ff;
              color: #46545d;
            }
            :deep(button:disabled) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(.el-pager li) {
              //background: rgba(0, 0, 0, 0.1);
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
              &.active {
                // color: #fff;
                color: #46545d;
              }
            }
            :deep(.btn-prev) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(.btn-next) {
              background: #fff;
              height: 34px;
              line-height: 34px;
              border: 1px solid #dddddd;
              //color: #66b1ff;
              color: #46545d;
              box-sizing: border-box;
            }
            :deep(span:not([class*='suffix'])) {
              color: #bbbbbb;
            }
            .el-pagination__jump {
              height: 34px;
              line-height: 34px;
            }
          }
        }
      }
    }
    .tableBox {
      height: calc(100% - 50px);
      background: #fff;
      padding: 20px 20px 0;
      box-sizing: border-box;
      //overflow: hidden;
      .desc {
        font-size: 12px;
        font-weight: 400;
        color: #f8b551;
        line-height: 33px;
        height: 33px;
        text-align: center;
        background: #fef0dc;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        div {
          line-height: 16px;
          // width: 16px;
          margin-right: 10px;
          img {
            width: 16px;
            height: 16px;
            // margin: auto;
            // margin-right: 10px;
          }
        }
      }
      .table {
        // background: rgba(0, 0, 0, 0.1);
        height: calc(100% - 50px);
        width: 100%;
        margin-bottom: 15px;
        :deep(.el-table-column--selection.is-leaf .el-checkbox) {
          display: none;
        }
        :deep(.el-table__cell.is-leaf) {
          //background: rgba(0, 0, 0, 0.1);
          // color: #6fd7f7;
          //color: #fff;
          color: #929ea8;
        }

        :deep(tr:hover > td) {
          background-color: transparent;
        }
        :deep(.el-table__empty-text) {
          //color: #fff;
          color: #929ea8;
        }
        :deep(td.el-table__cell) {
          //color: #fff;
          color: #929ea8;
        }
      }
      .el-pagination {
        height: 34px;
        padding: 0;
        box-sizing: border-box;
        width: 50%;
        :deep(.el-pagination__total) {
          font-size: 14px;
          font-weight: 400;
          color: #bbbbbb;
          line-height: 34px;
        }

        :deep(.el-input__inner) {
          height: 34px;
          //width: 60px;
          background: #fff;
          //color: #66b1ff;
          color: #46545d;
        }
        :deep(button:disabled) {
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
        }
        :deep(.el-pager li) {
          //background: rgba(0, 0, 0, 0.1);
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
          &.active {
            // color: #fff;
            color: #46545d;
          }
        }
        :deep(.btn-prev) {
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
        }
        :deep(.btn-next) {
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
        }
        :deep(span:not([class*='suffix'])) {
          color: #bbbbbb;
        }
        .el-pagination__jump {
          height: 34px;
          line-height: 34px;
        }
      }
    }
  }
</style>
